<template>
	<div class="game-container report-container">
		<div :key="key" class="view-container dealer-container">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				@submit.native.prevent
			>
				<el-form-item
					:label="`${$t('common.choose_merchant')}:`"
					prop="merchantId"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantInfoObj"
						:placeholder="$t('common.please_choose')"
					></merchant-select>
				</el-form-item>
				<el-form-item style="margin-left: 30px">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						:disabled="!queryData.merchantId"
						@click="query"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
			<div v-if="show" class="tabs-header">
				<template v-for="item in tabs">
					<div
						v-if="hasPermission(item.permissionId)"
						:key="item.id"
						:class="{ active: item.id === activeId }"
						@click="HandleTab(item.id)"
					>
						<span>{{ item.label }}</span>
					</div>
				</template>
			</div>
			<!-- 规则配置 -->
			<BasicConfiguration
				v-if="show && activeId === 0 && hasPermission('90000005')"
				:isFriend="true"
				:merchantInfoObj="merchantInfoObj"
			></BasicConfiguration>
			<!--邀请数据 InvitationData -->
			<InvitationData
				v-if="show && activeId === 1 && hasPermission('90000007')"
				:merchantInfoObj="merchantInfoObj"
			></InvitationData>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
// 基础配置页签
import BasicConfiguration from './BasicConfiguration'
import InvitationData from './InvitationData'
export default {
	// eslint-disable-next-line vue/name-property-casing
	name: 'friendInvitation',
	components: {
		// CommonTable,
		BasicConfiguration,
		InvitationData
	},
	data() {
		return {
			queryData: { merchantId: '' },
			merchantInfoObj: {},
			tabs: [
				{
					label: this.$t('operation.activity_list.rule_config'),
					id: 0,
					permissionId: '90000005'
				},
				{
					label: this.$t('friendInvitation.invitation_data'),
					id: 1,
					permissionId: '90000007'
				}
			],
			show: false,
			activeId: 0,
			key: Date.now()
		}
	},
	computed: {
		...mapGetters(['merchantInfo'])
	},
	watch: {
		'merchantInfo.id': {
			handler(newVal) {
				if (newVal) {
					this.queryData.merchantId = newVal
				}
			},
			immediate: true
		},
		'queryData.merchantId': {
			handler(newV, oldV) {
				this.show = false
			}
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.query()
		}
	},
	methods: {
		query() {
			if (this.show) {
				this.show = false
				setTimeout(() => {
					this.show = true
				}, 500)
			} else {
				this.show = true
			}
		},
		enterSearch() {
			this.query()
		},
		reset() {
			this.parentData = {}
			this.$refs.formRef.resetFields()
		},
		HandleTab(id) {
			this.activeId = id
		}
	}
}
</script>

<style lang="scss" scoped>
.dealer-container {
	.tabs-header {
		display: flex;
		div {
			height: 45px;
			line-height: 45px;
			text-align: center;
			margin: 0 10px;
			padding: 0 20px;
			background: #f2f2f2;
			&:hover {
				box-shadow: 1px 1px 2px #180202;
				background: #dcdfe6;
				cursor: pointer;
			}
			&.active {
				background: #ffff;
				border: 1px solid #dcdfe6;
				border-bottom: 0;
				font-weight: bold;
				color: rgb(22, 155, 213);
			}
		}
	}
}

::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
</style>
